<template>
    <el-row>
        <el-col :span="24" class="col">
            <el-row>
                <el-col :span="6">驿站名称：<el-input v-model="search.name" placeholder="请输入驿站名称" clearable /></el-col>
                <el-col :span="6">小区名称：<el-input v-model="search.phone" placeholder="请输入小区名称"
                        clearable/></el-col>
                <el-col :span="10">添加时间:
                    <el-date-picker v-model="search.time" type="daterange" range-separator="至" start-placeholder="起始日期"
                        end-placeholder="终止日期" />
                </el-col>
                <el-col :span="1"><el-button type="primary"
                        @click="sousuo(search.name, search.phone, search.time)">搜索</el-button></el-col>
            </el-row>
        </el-col>
    </el-row>
    <el-row>
        <el-ro>
            <el-col :span="24" class="col"><el-button type="primary" @click="xinzeng">添加驿站</el-button> </el-col>
        </el-ro>
    </el-row>
    <el-col :span="24" class="col">
        <el-table :data="areaList" border>
            <el-table-column prop="courierStationId" label="ID" align="center"
                label-class-name="header"></el-table-column>
            <el-table-column prop="courierStationName" label="驿站名字" align="center"
                label-class-name="header"></el-table-column>
            <el-table-column prop="courierStationImage" label="驿站照片" align="center"
                label-class-name="header"></el-table-column>
            <el-table-column prop="courierStationAddress" label="驿站地址" align="center"
                label-class-name="header"></el-table-column>
            <el-table-column prop="courierStationCommunityName" label="所在小区" align="center"
                label-class-name="header"></el-table-column>
            <el-table-column prop="courierStationOrderCount" label="订单总数" align="center"
                label-class-name="header"></el-table-column>
            <el-table-column prop="addTime" label="添加事件" align="center" label-class-name="header"></el-table-column>
            <el-table-column label="状态" align="center"
                label-class-name="header">
                <template #default="item">
                    <el-button type="success" style="background-color: #e7faf0;" text v-if="item.row.courierStationStatus == 1">上架</el-button>
                    <el-button type="danger" style="background-color: #ffeded;" text v-else>下架</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" label-class-name="header">
                <template #default="item">
                    <el-button type="text" v-if="item.row.courierStationStatus == 1" @click="chaozhuo(item.row)">立即下架</el-button>
                    <el-button type="text"  v-else @click="chaozhuo(item.row)">立即上架</el-button>
                    <el-button type="text" @click="edite(item.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-col>
    <el-dialog v-model="show" :title="title" width="800" destroy-on-close="true">
        <TianJiaYiZhan v-if="title == '添加驿站'" @operate="operateAction" />
        <EditeYiZhan v-if="title == '编辑'" @operate="operateAction" :data="yizhan"/>
    </el-dialog>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue';
import TianJiaYiZhan from './components/yizhan/TianJiaYiZhan.vue';
import axios from 'axios';
import EditeYiZhan from './components/yizhan/EditeYiZhan.vue';

let res = null;
let title = ref("");
let show = ref(false);

let yizhan = ref({});

let areaList = ref([]);

const edite = function (data) {
    show.value = true;
    title.value = "编辑"
    yizhan.value = data;
}

const chaozhuo = async function (item) {
    await axios.post("http://43.143.190.87:8091/panghudaojiaBackend/courierStation/modifyCourierStation",{
    "courierStationId": item.courierStationId,
    "courierStationStatus": 1-item.courierStationStatus,
});
areaList.value = areaList.value.map((index)=>{
    if(item.courierStationId==index.courierStationId)index.courierStationStatus=1-index.courierStationStatus;
    return index;
})
    


}
const search = reactive({
    nmae: null,
    phone: "",
    time: null,
});

const xinzeng = function () {
    show.value = true;
    title.value = "添加驿站";
}

const timeFun = (time) => {
    var d = time ? new Date(time) : new Date();
    var year = d.getFullYear();
    var month = d.getMonth() + 1;
    var day = d.getDate();
    var hours = d.getHours();
    var min = d.getMinutes();
    var seconds = d.getSeconds();

    if (month < 10) month = "0" + month;
    if (day < 10) day = "0" + day;
    if (hours < 0) hours = "0" + hours;
    if (min < 10) min = "0" + min;
    if (seconds < 10) seconds = "0" + seconds;
    return year + "-" + month + "-" + day + " " + hours + ":" + min + ":" + seconds;
}

const sousuo = async function (name, phone,time ) {
    let starTime = ""
    let endTime = ""
    if (time != null) {
        starTime = timeFun(time[0]);
        endTime = timeFun(time[1]);
    }
    res = await axios.get(`http://43.143.190.87:8091/panghudaojiaBackend/courierStation/querySearchCourierStationList?pageNum=1&pageSize=10&courierStationName=${name}&communityName=${phone}&courierStationStatus=&startTime=${starTime}&endTime=${endTime}`)
    areaList.value = res.data.data.list.map(item => {
        // item.address = item.communityProvince + item.communityCity + item.communityDistrict;
        return item;
    });
    console.log(res);
}

const operateAction = async function (data) {
    if (data) {
        await axios.post(`http://43.143.190.87:8091/panghudaojiaBackend/courierStation/${data.name}`, {
            ...data.data
        });
        res = await axios.get("http://43.143.190.87:8091/panghudaojiaBackend/courierStation/querySearchCourierStationList?pageNum=1&pageSize=10&courierStationName=&communityName=&courierStationStatus=&startTime=&endTime=");
        console.log(res);
        areaList.value = res.data.data.list.map(item => {
            // item.shopAddress = item.shopLongitude + item.shopLatitude;
            return item;
        });

    }
    show.value = false;
}

//组件首次挂载结束（通常代表组件首次加载）
onMounted(async function () {
   let res1 = await axios.get("http://43.143.190.87:8091/panghudaojiaBackend/courierStation/querySearchCourierStationList?pageNum=1&pageSize=10&courierStationName=&communityName=&courierStationStatus=&startTime=&endTime=");
    console.log(res1);
    areaList.value = res1.data.data.list;
    console.log(areaList.value);
    
})

</script>

<style lang="less" scoped>
.title:hover {
    color: #10d0d6;
}

.title {
    margin-left: 10px;
    margin-bottom: 30px;
}

.el-row {
    margin: 10px;
}

.el-input {
    width: 180px;
    height: 35px;
}

/deep/.header {
    background-color: #1890ff !important;
    color: white;
}
</style>